<template>
  <div class="component-usage-example">
    <h2>Element Plus 按需导入示例</h2>
    
    <!-- 这些组件会被自动导入，无需手动 import -->
    <el-card class="example-card">
      <template #header>
        <span>自动导入的组件</span>
      </template>
      
      <el-button type="primary" @click="showMessage">
        点击显示消息
      </el-button>
      
      <el-button type="success" @click="showNotification">
        点击显示通知
      </el-button>
      
      <el-input 
        v-model="inputValue" 
        placeholder="输入内容"
        style="margin-top: 10px;"
      />
      
      <el-select v-model="selectValue" placeholder="选择选项" style="margin-top: 10px; width: 100%;">
        <el-option label="选项1" value="option1" />
        <el-option label="选项2" value="option2" />
      </el-select>
    </el-card>
    
    <el-card class="example-card">
      <template #header>
        <span>图标使用</span>
      </template>
      
      <!-- 图标也会被自动导入 -->
      <el-icon size="20" color="#409eff">
        <House />
      </el-icon>
      
      <el-icon size="20" color="#67c23a">
        <Search />
      </el-icon>
      
      <el-icon size="20" color="#e6a23c">
        <Document />
      </el-icon>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElNotification } from 'element-plus'

const inputValue = ref('')
const selectValue = ref('')

const showMessage = () => {
  ElMessage.success('这是一个成功消息！')
}

const showNotification = () => {
  ElNotification({
    title: '通知标题',
    message: '这是一个通知消息',
    type: 'info'
  })
}
</script>

<style scoped>
.component-usage-example {
  padding: 20px;
}

.example-card {
  margin-bottom: 20px;
}

h2 {
  color: #303133;
  margin-bottom: 20px;
}
</style>
